<template>
	<view class="ez-time-line-item" :style="uiStyle">
		<view class="ez-time-line-item-node" :style="nodeStyle">
			<ez-icon :name="nodeIcon" :color="nodeColor" :size="Number(nodeSize) / 2" />
		</view>
		<view class="ez-time-line-item-content" :style="contentStyle">
			<slot />
		</view>
	</view>
</template>

<script>
	import props from "./props.js";
	import commonMethods from "../../library/commonMethods.js";
	export default {
		name: "ez-time-line-item",
		mixins: [props],
		computed: {
			/* UI样式 */
			uiStyle() {
				let style = {};
				//style.width = Number(this.width) + "rpx";
				return style;
			},
			/* 节点样式 */
			nodeStyle() {
				let style = {};
				style.top = Number(this.nodeTop) + "rpx";
				//style.left = -Number(this.nodeSize) / 2 + "rpx";
				style.background = this.nodeBgColor === "" ? commonMethods.getColorValueByType(this.nodeType) : this.nodeBgColor;
				style.width = Number(this.nodeSize) + "rpx";
				style.height = Number(this.nodeSize) + "rpx";
				style.borderRadius = Number(this.nodeSize) / 2 + "rpx";
				return style;
			},
			/* 竖线样式 */
			contentStyle() {
				let style = {}
				style.borderColor = this.lineColor;
				style.borderLeftStyle = this.lineType;
				style.marginLeft = Number(this.nodeSize) / 2 + "rpx";
				return style
			}
		}
	}
</script>

<style lang="less" scoped>
	.ez-time-line-item{
		position: relative;
		.ez-time-line-item-node{
			position: absolute;
			z-index: 1;
			left: 0;
			justify-content: center;
			align-items: center;
			align-content: center;
			text-indent: 0;
		}
		.ez-time-line-item-line{
			border-left: solid 4rpx #ffffff;
		}
		.ez-time-line-item-content{
			padding-left: 30rpx;
			border-left: solid 4rpx #000000;
			text-indent: 0;
		}
	}
</style>
